<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.1.1.min.js"></script>
</head>
<body>

    <div id="app">
        <label>用户名:</label>
        <input type="text" v-model="userInfo.userName">
        <br>
        <label>密码:</label>
        <input type="password" v-model="userInfo.userPwd">
         <br>
         <span style="color: red">{{info }}</span>
         <button type="button" @click="login">登录</button>
    </div>
</body>
<script>
      new Vue({
           el:"#app",//作用访问
           data:{ //定义要绑定html元素的数据
               userInfo:{
                   userName:"",//用户名
                   userPwd:""  //密码
               },
               info:""//提示信息
           },
           methods:{
               login(){//登录
                    const self = this;
                   //发送ajax请求
                   $.ajax({
                        url:"/login/",//请求地址
                        data:this.userInfo,//请求参数
                        dataType:"json",
                        success:function (rs) {
                            console.log(rs);
                            if (rs.code ==200){
                                //跳转到index页面
                                window.location.href="/static/index.html";
                            }else{
                                self.info = rs.info;
                            }

                        }
                   })
               }
           }
      })

</script>
</html>